.panel {
  .react-tabs {
    $tab-bar-height: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    &__tab {
      &-list {
        background: var(--color-background-medium);
        margin: 0;
        flex-shrink:0;
        list-style: none;
        display: flex;
        align-items: flex-end;
        padding-top: var(--spacing-half-unit);
        padding-left: var(--spacing-half-unit);
        padding-right: var(--spacing-half-unit);
        padding-bottom: 0;
        height: $tab-bar-height;
      }
      // Tab Styles
      flex-grow: 1;
      flex-shrink:0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-quarter-unit);
      color: var(--color-text-base);
      font-size: var(--font-size-base);
      background: var(--color-background-medium);
      border: var(--border-default);
      border-bottom: 0;
      position: relative;
      background: var(--color-background-light);
      transition: border-color 0.15s ease-in-out;

      &:first-of-type {
        border-top-left-radius: var(--border-radius);
      }
      &:last-of-type {
        border-top-right-radius: var(--border-radius);
      }


      &:hover {
        background-color: var(--color-background-base);
        cursor: pointer;
      }

      &--selected {
        background-color: var(--color-background-base);
        pointer-events: none;
        margin-top: 0;
        color: var(--color-text-active);
        border-top-color: var(--color-accent);
        border-top-width: 2px;

        &::before {
          position: absolute;
          top: 100%;
          width: 100%;
          height: 1px;
          content: '';
          background-color: var(--color-background-base);
          left: 0;
          z-index: 4;
        }
      }
      &:not(:first-of-type):not(:last-of-type) {
        border-left: 0;
      }
      &:last-of-type {
        border-left: none;
      }
      &-panel {
        border-top: var(--border-default);
        display: none;
        &--selected {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}
